DAY22 JavaScript事件處理

2023 iThome 鐵人賽

DAY 22

Modern Web

Web互動式網頁系列第 22 篇

15th鐵人賽 web互動式網頁

louxin17

團隊NUTC_IMAC_EFL

2023-10-03 21:01:21

349 瀏覽

分享至

當我們在網頁上進行互動時，我們可以透過JS來捕捉和處理各種用戶操作，例如滑鼠點擊、按鍵按下、表單提交等等。

什麼是事件？

事件是網頁上發生的各種動作，例如用戶的互動、瀏覽器的操作等。這些事件可以是滑鼠點擊、鍵盤輸入、頁面加載完成等。當這些事件發生時，我們可以使用JS來捕捉它們，並執行相應的代碼。

事件處理器（Event Handlers）

用於定義當特定事件發生時應該執行的操作。
範例:編寫一個事件處理器來在用戶點擊按鈕時彈出一個提示框。

// 這是一個事件處理器，用於處理按鈕點擊事件
function handleClick() {
  alert('J個按鈕被點擊了！');
}

事件監聽器（Event Listeners）

要將事件處理器與HTML元素關聯起來，使用事件監聽器來監聽特定事件並及時調用相應的事件處理器。

範例:將事件處理器與按鈕元素關聯。

// 獲取按鈕元素
const button = document.getElementById('myButton');

// 添加事件監聽，當按鈕被點擊時，調用handleClick函數
button.addEventListener('click', handleClick);

常見的事件類型

使用事件監聽器來處理以下是一些常見的事件類型:

click：當元素被點擊時觸發。
mouseover：當滑鼠移動到元素上方時觸發。
keydown：當按下鍵盤上的任何按鍵時觸發。
submit：當表單提交時觸發。
load：當網頁完成加載時觸發。

範例：

創建一個按鈕點擊事件，並在按鈕點擊時顯示提示框
獲取了一個按鈕元素然後定義一個事件處理器函數handleClick。
使用addEventListener將事件處理器與按鈕的click事件關聯起來。當按鈕被點擊時，handleClick函數將被調用並彈出一個提示框。

<!DOCTYPE html>
<html>
<head>
  <title>事件處理示例</title>
</head>
<body>
  <!-- 按鈕元素 -->
  <button id="myButton">點我！</button>

  <script>
    // 獲取按鈕元素
    const button = document.getElementById('myButton');

    // 定義事件處理函數
    function handleClick() {
      alert('被點擊了！');
    }

    // 當按鈕被點擊時，調用handleClick函數
    button.addEventListener('click', handleClick);
  </script>
</body>
</html>

今天介紹到這邊，感謝觀看!